<template>
    <div class="message-list-page">
        <el-card shadow="never" class="filter">
            <el-form inline ref="form" :model="form">
                <el-form-item label="消息标题" prop="keyword">
                    <el-input v-model="form.keyword" placeholder="请输入消息标题"></el-input>
                </el-form-item>
                <el-form-item label="消息状态" prop="status">
                    <el-select v-model="form.status" placeholder="请输入">
                        <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="消息类型" prop="type">
                    <el-select v-model="form.type" placeholder="请输入">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="onResetFilters">重置</el-button>
            </el-form>
        </el-card>
        <el-card shadow="never" class="mt-4">
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="消息标题" prop="title"></el-table-column>
                    <el-table-column label="消息类型">
                        <template slot-scope="{row}">{{ handleStatus(row.type) }}</template>
                    </el-table-column>
                    <el-table-column label="消息状态">
                        <template slot-scope="{row}">{{ row.status ? '上架中' : '已下架' }}</template>
                    </el-table-column>
                    <el-table-column label="推送次数" prop="push_total"></el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="{row}">{{ timeFormat(row.created_at) }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="{row,$index}">
                            <el-button type="text" @click="onEditClick(row)">编辑</el-button>
                            <el-button type="text" @click="onClickPush(row)">推送</el-button>
                            <el-button
                                type="text"
                                @click="onEditStatus(row)"
                            >{{ row.status ? '下架' : '上架' }}</el-button>
                            <el-button
                                type="text"
                                @click="onDeleteClick(row,$index)"
                                class="red-color"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer">
                <pagination
                    ref="pagination"
                    :currentPage="form.page"
                    :pageSize="form.size"
                    :handleCurrentChange="onCurrentChange"
                    :handlePageSizeChange="onPageSizeChange"
                    :totalElements="totalElements"
                ></pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import {
    Table,
    TableColumn,
    Input,
    Form,
    FormItem,
} from 'element-ui';
import Pagination from '@/components/base/Pagination';
import TimeFormats from '@/helpers/TimeFormats';

export default {
    components: {
        ElInput: Input,
        ElForm: Form,
        ElFormItem: FormItem,
        ElTable: Table,
        ElTableColumn: TableColumn,
        Pagination,
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 10,
                keyword: '',
                status: null,
                type: null,
            },
            totalElements: 0,
            options: [{
                value: 1,
                label: '无跳转',
            }, {
                value: 2,
                label: '跳转学习主题',
            }, {
                value: 3,
                label: '跳转节点',
            }, {
                value: 4,
                label: '富文本',
            }],
            status: [{
                value: true,
                label: '上架中',
            }, {
                value: false,
                label: '已下架',
            }],
        };
    },
    methods: {
        handleStatus(val) {
            let data = '';
            switch (val) {
                case 2:
                    data = '跳转学习主题';
                    break;
                case 3:
                    data = '跳转节点';
                    break;
                case 4:
                    data = '富文本';
                    break;
                default:
                    data = '无跳转';
                    break;
            }
            return data;
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
            this.onSubmit();
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('message', { params: this.form }).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAddClick() {
            this.$router.push({
                name: 'Message.add',
            });
        },
        onEditClick(row) {
            this.$router.push({
                name: 'Message.add',
                query: {
                    id: row.id,
                },
            });
        },
        onClickPush(row) {
            $ele.$confirm('确定推送将该消息吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                API.put(`message/push/${row.id}`).then(() => {
                    $ele.$message.success('推送成功');
                    this.fetchData();
                });
            }).catch(() => { });
        },
        onEditStatus(row) {
            const text = row.status ? '下架' : '上架';
            $ele.$confirm(`确定将该${text}吗`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                API.put(`message/${row.id}/${row.status}`).then(() => {
                    $ele.$message.success(row.status ? '上架成功' : '下架成功');
                    this.fetchData();
                });
            }).catch(() => { });
        },
        onDeleteClick(row) {
            $ele.$confirm('确定删除该消息吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`message/${row.id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        timeFormat(time) {
            return time ? new TimeFormats().convertTime('', time) : '';
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.message-list-page {
    .filter {
        .input-width {
            max-width: 300px;
        }
    }
    .logo {
        width: 60px;
        height: 60px;
    }
    .footer {
        height: 44px;
        background: #f7f7f7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
    }
}
</style>
